﻿@model Story
<div class="backlog-story-wrapper">
    <div class="backlog-story-header">
        <div class="left-float-wrapper">
            <div class="trigger-and-name-wrapper">
                <div id="story-1-trigger" class="float-left triangle-2up-down">
                </div>
                <div class="backlog-story-name float-left">
                    @Model.Description
                </div>
            </div>
            <div class="percentage-wrapper float-left">
                <div class="percentage-bar-mask float-left">
                    <div class="percentage-bar">
                    </div>
                </div>
                <div class="percentage-number float-right">
                    80%
                </div>
            </div>
            <!-- end of percentage-wrapper -->
        </div>
        <!-- end of trigger and name wrapper -->
        <div class="buttons-badges-wrapper float-right">
            <div class="priority-badge red float-left">
                <div class="badge-header">
                    Priority
                </div>
                <div class="badge-body">
                    5
                </div>
            </div>
            <!-- end of priority badge -->
            <div class="effort-badge red float-left">
                <div class="badge-header">
                    Effort
                </div>
                <div class="badge-body">
                    100
                </div>
            </div>
            <!-- end of effort badge -->
            <div class="type-badge float-left">
                <div class="badge-header">
                    Type
                </div>
                <div class="badge-body-type type-red">
                    Feature
                </div>
            </div>
            <!-- end of type badge -->
            <a href="#" class="manage-btn-2 float-left">Manage</a> <a href="#" class="delete-btn-2 float-left">Delete</a>
        </div>
        <!-- end of buttons-badges-wrapper -->
    </div>
    <!-- end of backlog story header -->
    <div class="backlog-story-body" style="display: block;">
        <div class="story-tab-bar">
            <ul class="edit-bar-btn-wrapper">
                <li>
                    <div class="tasks-btn">
                        Tasks<span class="nr-of-items">(5)</span>
                    </div>
                </li>
                <li>
                    <div class="bright-insent-line-vertical height-1">
                        <div class="bdark-line-v">
                        </div>
                        <div class="bbright-line-v">
                        </div>
                    </div>
                    <!-- end of insent-line-vertical -->
                </li>
                <li>
                    <div class="comments-btn">
                        Comments<span class="nr-of-items">(2)</span>
                    </div>
                </li>
                <li>
                    <div class="bright-insent-line-vertical height-1">
                        <div class="bdark-line-v">
                        </div>
                        <div class="bbright-line-v">
                        </div>
                    </div>
                    <!-- end of insent-line-vertical -->
                </li>
                <li>
                    <div class="attachments-btn tab-selected">
                        Attachments<span class="nr-of-items">(23)</span>
                    </div>
                </li>
                <li>
                    <div class="bright-insent-line-vertical height-1">
                        <div class="bdark-line-v">
                        </div>
                        <div class="bbright-line-v">
                        </div>
                    </div>
                    <!-- end of insent-line-vertical -->
                </li>
            </ul>
            <!-- end of edit bar btn wrapper -->
        </div>
        <!-- end of story tab bar -->
        <div class="tab-body-container">
            <div class="tab-tasks" style="display: none;">
                TASKS
            </div>
            <!-- end of tab tasks -->
            <div class="tab-comments" style="display: none;">
                COMMENTS
            </div>
            <!-- end of tab comments -->
            <div class="tab-attachments" style="display: block;">
                ATTACHMENTS
            </div>
            <!-- end of tab attachments -->
        </div>
        <!-- end of tab container -->
    </div>
    <!-- end of backlog-story-body -->
</div>
